<nz-tabset nzType="card">
    <nz-tab nzTitle="生成二维码">
        <div nz-row>
            <div nz-col nzSpan="12">
                <textarea nz-input [(ngModel)]="qrcodeText" placeholder="请输入您的内容"
                    [nzAutosize]="{ minRows: 20, maxRows: 20 }">
                </textarea>
            </div>
            <div nz-col nzSpan="12" nzOffset="0" style="text-align: center;">
                <img *ngIf="qrcodeSrc" nz-image width="400px" height="400px" [nzSrc]="qrcodeSrc" alt="" />
            </div>
        </div>


        <p style="margin: 10px 0;">
            <button nz-button nzType="primary" (click)="translate()">生成</button>
        </p>
    </nz-tab>
    <nz-tab nzTitle="历史记录">
        <p>
            <button nz-button nzType="primary" (click)="removeRows()">删除选中行</button>
        </p>

        <nz-table #basicTable [nzData]="dataSet" nzBordered="true" [nzFrontPagination]="false" [nzTotal]="page.total"
            [nzPageIndex]="page.page" [nzPageSize]="page.per_page" [nzShowSizeChanger]="true"
            (nzQueryParams)="onQueryParamsChange($event)">
            <thead>
                <tr>
                    <th [nzChecked]="checked" [nzIndeterminate]="indeterminate"
                        (nzCheckedChange)="onAllChecked($event)"></th>
                    <th>ID</th>
                    <th>内容</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of basicTable.data">
                    <td [nzChecked]="setOfCheckedId.has(data.code_id)"
                        (nzCheckedChange)="onItemChecked(data.code_id, $event)">
                    </td>
                    <td>{{data.code_id}}</td>
                    <td>{{data.code_text}}</td>
                    <td>{{data.created_at}}</td>
                    <td><a [href]="'/api/qrcode?txt='+data.code_text">重新生成</a></td>
                </tr>
            </tbody>
        </nz-table>
    </nz-tab>

</nz-tabset>